import React from 'react';
import { Switch, Radio, Button } from '@teamix/ui';
import SwitchConfirm from './switchPopConfirm';
import GuaranteeModal from './guaranteeModal';
import docs from 'utils/docs';
import intl from '../../../../../../../../../../locale';

export default class MonitorTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
      showDetail: false,
    };
  }

  updateForceControl = (value) => {
    const { sensitive_info_detection } = this.props;
    if (sensitive_info_detection) {
      this.props.updateData({
        sensitive_info_detection: {
          ...sensitive_info_detection,
          forced_control: value,
        },
      });
    }
  };

  handleSave = () => {
    const { sensitive_info_detection } = this.props;
    this.props.updateService({
      forced_control: sensitive_info_detection.forced_control,
    });
    this.setState({
      showDetail: false,
    });
  };

  render() {
    // inDialog = true 弹窗内用时, dialogCallback 弹窗的回调
    const { sensitive_info_detection, isOpeningService, inDialog, dialogCallback } = this.props;
    const { isModalOpen, showDetail } = this.state;
    const checked = sensitive_info_detection && sensitive_info_detection.enabled;
    const forced_control = sensitive_info_detection && sensitive_info_detection.forced_control;
    return (
      <div>
        <div className={`report-switch ${inDialog ? 'inDialog' : ''}`}>
          <div className="report-switch-left">
            <div className="report-switch-left-title">
              {intl.get({
                id: 'code-assets.containers.sensitiveInfoReport.switch.EnableSensitiveInformationDetectionFor',
                defaultMessage: '为所有代码库开启敏感信息检测',
              })}
            </div>
            <div className="report-switch-left-description">
              {inDialog ? (
                <span>
                  {intl.get({
                    id: 'code-assets.containers.sensitiveInfoReport.switch.HelpsEnterprisesControlInformationSecurity',
                    defaultMessage:
                      '帮助企业管控信息安全。开启后，根据代码库中的设置规则触发扫描。',
                  })}

                  <a href={docs('org-sensitive-info')} target="_blank" rel="noreferrer">
                    {intl.get({
                      id: 'code-assets.containers.sensitiveInfoReport.switch.LearnMore',
                      defaultMessage: '了解更多',
                    })}
                  </a>
                </span>
              ) : (
                <span>
                  {intl.get({
                    id: 'code-assets.containers.sensitiveInfoReport.switch.ItHasIndustryLeadingSensitive',
                    defaultMessage:
                      '具备业界领先的敏感信息识别准确度，帮助企业管控信息安全。开启后，根据代码库中的设置规则触发扫描。',
                  })}

                  <a href={docs('org-sensitive-info')} target="_blank" rel="noreferrer">
                    {intl.get({
                      id: 'code-assets.containers.sensitiveInfoReport.switch.LearnMore',
                      defaultMessage: '了解更多',
                    })}
                  </a>
                </span>
              )}
            </div>
          </div>
          <div className="report-switch-right">
            {!inDialog && checked && !showDetail && (
              <div>
                <Button
                  type="primary"
                  style={{ marginRight: 12 }}
                  text
                  onClick={() => {
                    this.setState({ showDetail: true });
                  }}
                >
                  {intl.get({
                    id: 'code-assets.containers.sensitiveInfoReport.switch.ModifySettings',
                    defaultMessage: '修改设置',
                  })}
                </Button>
              </div>
            )}

            <SwitchConfirm
              trigger={<Switch name="switch" checked={checked} />}
              onChange={(value) => {
                // 选中需要弹窗
                if (!value) {
                  this.props.closeService();
                } else {
                  this.setState({
                    isModalOpen: true,
                  });
                }
              }}
              needPopConfirm={false}
            />
          </div>
        </div>
        {!inDialog && checked && showDetail && (
          <div className="risk-limit">
            <div className="risk-limit-title">
              {intl.get({
                id: 'code-assets.containers.sensitiveInfoReport.switch.WhetherToAllowTheCode',
                defaultMessage: '是否允许代码库管理员关闭扫描',
              })}
            </div>
            <div className="risk-limit-radio">
              <Radio.Group
                itemDirection={'hoz'}
                onChange={this.updateForceControl}
                value={forced_control}
              >
                <Radio value={false}>
                  {intl.get({
                    id: 'code-assets.containers.sensitiveInfoReport.switch.AllowTheCodeLibraryAdministrator',
                    defaultMessage: '允许代码库管理员关闭扫描',
                  })}
                </Radio>
                <Radio value>
                  {intl.get({
                    id: 'code-assets.containers.sensitiveInfoReport.switch.TheCodeLibraryAdministratorCannot',
                    defaultMessage: '不允许代码库管理员关闭扫描',
                  })}
                </Radio>
              </Radio.Group>
            </div>
            <div className="risk-limit-btn">
              <Button type="primary" onClick={this.handleSave}>
                {intl.get({
                  id: 'code-assets.containers.sensitiveInfoReport.switch.Save',
                  defaultMessage: '保存',
                })}
              </Button>
            </div>
          </div>
        )}

        {isModalOpen && (
          <GuaranteeModal
            isModalOpen={isModalOpen}
            okFn={() => {
              this.props.openService(() => {
                this.setState({
                  isModalOpen: false,
                  showDetail: true,
                });
              });
              inDialog && dialogCallback && dialogCallback(true);
            }}
            isOpeningService={isOpeningService}
            closeFn={() => {
              this.setState({
                isModalOpen: false,
              });
            }}
          />
        )}
      </div>
    );
  }
}
